<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
				/* 练习； 1.圆形 2.正三角形
				 思路1：宽高与边框倒角一致
				 思路2：div#triangle   css中  抓到div  左边框：50px 实线 红色
				                                右边框：50px 实线 黄色
															  下边框：50px 实线 黑色
				      注意：先别加宽高    transparent  透明色
				 */
				div#circle{
					width: 400px;
					height: 400px;
					border: 1px solid red;
					border-radius: 50%;
					/* 边框阴影 box-shadow 属性*/
					box-shadow: 5px 5px 50px 50px red inset;
				}
				/* 思路2：div#triangle   css中  抓到div  左边框：50px 实线 红色
				                                右边框：50px 实线 黄色
															  下边框：50px 实线 黑色
				      注意：先别加宽高    transparent  透明色
					   */
					  div#triangle{
						  width: 0;
						  /* border-left: 50px solid transparent;
						  border-right: 50px solid transparent;
						  border-bottom: 50px solid black; */
						  /* 两行：倒三角，蓝色，透明度 .3
						   提醒：所有边框：50px solid transparent
						        上边框颜色改成蓝色  0,0,255
						  								*/
						  border: 50px solid transparent;
						  border-top-color: rgba(0, 0, 255, .3);
						  
					  }
					  /* outline  边框轮廓  只针对input 元素*/
					  input{
						  outline: 1px solid red;
					  }
					 /* 实际应用：通配选择器  去掉轮廓
					  *{ outline:0;}
					 */ 
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>